<template>
    <view style="display: flex; flex-direction: column; width: 90%; margin-left: 5%">
        <view style="font-size: 130%; color: #1244de; font-weight: bold; margin-top: 30rpx">修改问题</view>
        <view class="card" style="display: flex; flex-direction: column; margin-top: 30rpx">
            <view style="font-size: 110%; color: #1244de; font-weight: bold; margin-left: 20rpx; margin-top: 20rpx">问题标题</view>
            <view style="margin-top: 20rpx; margin-left: 20rpx">
                <textarea :show-confirm-bar="false" v-model="title" style="font-size: 90%; height: 100rpx" placeholder="写下一种文明"></textarea>
            </view>
        </view>
        <view class="card" style="display: flex; flex-direction: column; margin-top: 30rpx">
            <view style="font-size: 110%; color: #1244de; font-weight: bold; margin-left: 20rpx; margin-top: 20rpx">背景描述</view>
            <view style="margin-top: 20rpx; margin-left: 20rpx">
                <textarea :show-confirm-bar="false" maxlength="-1" v-model="context" style="font-size: 90%; height: 300rpx" placeholder="写下一种文明"></textarea>
            </view>
        </view>
        <button @tap="updateQuestion" style="background-color: #1244de; color: white; margin-top: 30rpx; margin-bottom: 30rpx; border-radius: 18rpx">提 交</button>
    </view>
</template>

<script>
import http from '@/common/service/service.js';
export default {
    data() {
        return {
            id: '',
            title: '',
            context: ''
        };
    },
    onLoad: function (options) {
        this.id= options.id
        this.getQuestionInfo()
    },
    methods: {
		getQuestionInfo(){
			this.$api.getQuestionInfo({
				id: this.id
			}).then(res => {
				this.title= res.data.title
				this.context= res.data.context
			})
		},
        updateQuestion() {
			this.$api.updateQuestionInfo({
				id: this.id,
				title: this.title,
				context: this.context
			})
        },
    }
};
</script>
<style>
.card {
    background-color: white;
    box-shadow: 1px 1px 8px 2px #e9eee9;
    border-radius: 18rpx;
}
</style>
